<template>
	<div class="operation-box">
		<div class="item-box">
			<div class="title">{{title}}</div>
			<div class="modify-box">
				<el-select v-model="checkedValue" placeholder="请选择" @change="onSelectChange">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, } from 'vue';
	export default {
		name: 'tool-select',
		props: {
			title: {
				type: String,
				default: '标题'
			},
			options: {
				type: Array,
				default: () => []
			},
			checked: {
				type: String,
				default: ''
			},
		},
		setup(props, { emit }) {
			const state = reactive({
				checkedValue: '',
				options: []
			})
			const onSelectChange = (value) => {
				emit('update:checked', value)
			}
			onMounted(() => {
				state.options = props.options;
				state.checkedValue = props.checked;
			})
			return {
				onSelectChange,
				...toRefs(state)
			}
		},
	}
</script>

<style lang="scss" scoped>
@import '../basics/scss/index.scss';
</style>
